import { Modal, Form, Input, Switch, message, Spin, Select } from "antd";
import React, { forwardRef, useState, useImperativeHandle } from "react";
import { getDict } from "@/utils/localStorage";
import moment from "moment";
import api_share from "@/api/blog/share";

const App = forwardRef((props, ref) => {
    const [id, setId] = useState("");
    const [type, setType] = useState("");
    const { callback } = props;
    const [ifShowModel, setifShowModel] = useState(false);
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const initialValues = {
        title: "",
        tag: "",
        coverUrl: "",
        targetUrl: "",
        desc: "",
    };
    //将需要的方法暴露出ref
    useImperativeHandle(ref, () => ({
        open,
    }));
    //页面初始化
    const open = (_id, _type) => {
        setId(_id);
        setType(_type);
        form.resetFields(); //数据初始化
        setifShowModel(true); //打开弹框
        if (_type === "update" || _type === "preview") getModel(_id);
    };
    //确定
    const handleOk = async () => {
        let valid;
        await form.validateFields().catch(() => {
            valid = true;
        });
        if (valid) return;

        if (type === "add") add();
        if (type === "update") update();
    };
    //取消
    const handleCancel = () => {
        setifShowModel(false);
    };
    //添加
    const add = async () => {
        setLoading(true);
        try {
            let data = Object.assign({ createTime: moment().format("YYYY-MM-DD") }, form.getFieldsValue(true));
            let res = await api_share.addList(data);
            setLoading(false);
            message.success(res.msg);
            setifShowModel(false);
            callback();
        } catch (err) {
            setLoading(false);
        }
    };
    //获取model
    const getModel = async (_id) => {
        setLoading(true);
        const res = await api_share.getmodel({ _id });
        setLoading(false);
        form.setFieldsValue({
            tag: res.data.tag,
            title: res.data.title,
            coverUrl: res.data.coverUrl,
            targetUrl: res.data.targetUrl,
            desc: res.data.desc,
            top: res.data.top,
        });
    };
    //编辑
    const update = async () => {
        setLoading(true);
        try {
            let res = await api_share.update(Object.assign({ _id: id }, form.getFieldsValue(true)));
            setLoading(false);
            message.success(res.msg);
            setifShowModel(false);
            callback();
            form.resetFields();
        } catch (err) {
            setLoading(false);
        }
    };
    return (
        <>
            <Modal title={type === "add" ? "新增" : type === "update" ? "编辑" : "预览"} open={ifShowModel} onOk={handleOk} onCancel={handleCancel}>
                <Spin spinning={loading} delay={500}>
                    <Form form={form} name="basic" disabled={type === "preview"} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} initialValues={initialValues} autoComplete="off">
                        <Form.Item label="标题" name="title" rules={[{ required: true, message: "Please input your title!" }]}>
                            <Input placeholder="Please input your title!" />
                        </Form.Item>
                        <Form.Item label="标签" name="tag" rules={[{ required: true, message: "Please select your tag!" }]}>
                            <Select placeholder="Select a person" options={getDict('share_type')}></Select>
                        </Form.Item>
                        <Form.Item label="描述" name="desc" rules={[{ required: true, message: "Please input your desc!" }]}>
                            <Input placeholder="Please select your desc!" />
                        </Form.Item>
                        <Form.Item label="网址" name="targetUrl" rules={[{ required: true, message: "Please input your targetUrl!" }]}>
                            <Input placeholder="Please select your targetUrl!" />
                        </Form.Item>
                        <Form.Item label="封面" name="coverUrl" rules={[{ required: true, message: "Please input your coverUrl!" }]}>
                            <Input placeholder="Please select your coverUrl!" />
                        </Form.Item>
                        <Form.Item label="置顶" name="top" valuePropName="checked">
                            <Switch />
                        </Form.Item>
                    </Form>
                </Spin>
            </Modal>
        </>
    );
});
export default App;
